<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>优惠券-用户记录</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" href="./css/business.css">
</head>
<body>
<div id="uniocn" class="layui-layout layui-layout-admin">
    <div class="financeTitle">
        <button class="layui-btn layui-btn-ms">结算记录</button>
    </div>
    <div class="formBox">
        <form action="##" class="layui-form">
            <div class="layui-form-item">
                <div class="layui-input-inline">
                    <select name="Keyword" lay-verify="required">
                        <option value="">选择一级分类</option>
                        <option value="0">北京</option>
                        <option value="1">上海</option>
                        <option value="2">广州</option>
                        <option value="3">深圳</option>
                        <option value="4">杭州</option>
                    </select>
                </div>
                <div class="layui-input-inline" style="margin-right: 20px">
                    <select name="Settlement" lay-verify="required">
                        <option value="">选择一级分类</option>
                        <option value="0">北京</option>
                        <option value="1">上海</option>
                        <option value="2">广州</option>
                        <option value="3">深圳</option>
                        <option value="4">杭州</option>
                    </select>
                </div>
                <div class="layui-input-inline" style="margin-right: 0">
                    <input type="text" name="title" required lay-verify="required" placeholder="请输入关键字"
                           autocomplete="off" class="layui-input">
                </div>
                <button class="layui-btn layui-btn-primary">搜索</button>
            </div>
        </form>
    </div>

    <div class="finance-record">
        <table class="layui-table">
            <colgroup>
                <col width="5%">
                <col width="10%">
                <col width="15%">
                <col width="10%">
                <col width="5%">
                <col width="15%">
                <col width="10%">
                <col width="20%">
                <col width="10%">
            </colgroup>
            <thead>
            <tr>
                <th><input type="checkbox" v-model="checkAll" @change="allChoose"></th>
                <th>序号</th>
                <th>优惠券标题</th>
                <th>所属商家</th>
                <th>类型</th>
                <th>用户信息</th>
                <th>优惠券价格</th>
                <th>优惠券有效状态</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(item,index) in record">
                <td><input type="checkbox" v-model="item.choose" @change="chooseOne"></td>
                <td>{{item.number}}</td>
                <td>
                    <div class="coupon-title">
                        <p class="titleImg"><img :src="item.titleImg" alt=""></p>
                        <p>
                            <span>{{item.title}}</span><br>
                            <span>核销码:{{item.code}}</span>
                        </p>
                    </div>
                </td>
                <td>{{item.business}}</td>
                <td>
                    <div>
                        <button class="layui-btn layui-btn-primary layui-btn-sm"
                                style="background: #2a2e36;color: #fff;">折扣劵
                        </button>
                    </div>
                </td>
                <td>
                    <div class="coupon-title">
                        <p class="titleImg"><img :src="item.titleImg" alt=""></p>
                        <p>
                            <span>{{item.info}}</span><br>
                        </p>
                    </div>
                </td>
                <td>
                    <div>
                        <button class="layui-btn layui-btn-primary layui-btn-sm"
                                style="background: #5FB878;color: #fff;">{{item.price}}
                        </button>
                    </div>
                </td>
                <td>
                    <div>
                        <p>领取时间:{{item.time}}</p>
                        <p>过期时间:{{item.time}}</p>
                        <button class="layui-btn layui-btn-primary layui-btn-xs">未使用</button>
                    </div>
                </td>
                <td>
                    <div>
                        <button class="layui-btn layui-btn-primary layui-btn-sm" @click="del(index)">删除</button>
                    </div>
                </td>
            </tr>
            <tr>
                <td colspan="9" v-if="record.length<=0" style="text-align: center">暂无数据</td>
            </tr>
            </tbody>
        </table>
        <div style="display: flex;justify-content: space-between;margin-top: 30px">
            <button class="layui-btn layui-btn-primary layui-btn-sm" @click="remove">删除选中记录</button>
            <div id="test1"></div>
        </div>

    </div>

</div>

<script src="layui/layui.js"></script>
<script src="./js/jquery-3.2.1.min.js"></script>
<script src="./js/vue2.5.16.js"></script>
<script>
    layui.use(['form', 'layer', 'laypage'], function () {
        var form = layui.form;
        var layer = layui.layer;
        var laypage = layui.laypage;

        laypage.render({
            elem: 'test1' //注意，这里的 test1 是 ID，不用加 # 号
            , count: 50 //数据总数，从服务端得到
        });
    })
    new Vue({
        el: "#uniocn",
        data: {
            checkAll: false,
            record: [
                {
                    id: 0,
                    choose: false,
                    number: "2",
                    business: "好多",
                    title: "通用优惠券",
                    titleImg: "./images/temporary.jpg",
                    code: "1245",
                    info: "用户信息",
                    price: "2000",
                    Extract: '0.5%',
                    time: "2017-08-12 12:23:10"
                }, {
                    id: 1,
                    choose: false,
                    number: "2",
                    business: "好多",
                    title: "通用优惠券",
                    titleImg: "./images/temporary.jpg",
                    code: "1245",
                    info: "用户信息",
                    price: "2000",
                    Extract: '0.5%',
                    time: "2017-08-12 12:23:10"
                }
            ]
        },
        methods: {
            //全选
            allChoose: function () {
                var that = this;
                if (!that.checkAll) {
                    that.record.forEach(function (item, i) {
                        item.choose = that.checkAll
                    })
                } else {
                    that.record.forEach(function (item, i) {
                        item.choose = that.checkAll
                    })
                }
            },
            //单选
            chooseOne: function () {
                var that = this;
                var cur = that.record.filter(function (item, i) {
                    return item.choose == true
                })
                //console.log(cur)
                cur.length == that.record.length ? that.checkAll = true : that.checkAll = false
            },
            //删除
            del: function (index) {
                var that = this;
                if (that.record[index].choose) {
                    layer.confirm('确认删除吗?', {
                        btn: ['确认', '取消']
                    }, function () {
                        that.record.splice(index, 1)
                        layer.msg('删除成功', {icon: 1})
                    }, function () {
                        layer.msg('取消删除')
                    })
                } else {
                    layer.msg('还未选中哈!')
                }
            },
            //删除选中
            remove: function () {
                var that = this;
                var arr = [];
                that.record.forEach(function (item, i) {
                    if (item.choose == true) {
                        arr.push(item.id)
                    }
                })
                console.log(arr)
                if (arr.length > 0) {
                    layer.confirm('确定删除吗?', {
                        btn: ['确认', '删除']
                    }, function () {
                        for (var i = 0, len = arr.length; i < len; i++) {
                            var id = arr[i];
                            for (var j = 0, recordLen = that.record.length; j < recordLen; j++) {
                                if (id == that.record[j].id) {
                                    that.record.splice(j, arr.length);
                                    layer.msg('删除成功', {icon: 1})
                                    that.checkAll = false;
                                    return
                                }
                            }
                        }
                    }, function () {
                        layer.msg('取消了删除', {icon: 2})
                    })
                } else {
                    layer.msg('你还未选中哈！')
                }
            }
        }
    })
</script>
</body>
</html>
